// 渲染对象
const Renderer = {
    // 初始化
    main(data, index){
        this.cityFun(data, []);
        this.birth([0, 0, 0]);
        this.rendererFn(index, true);
        ScreenBtn.main();
        // 搜索
        ScreenData.screenFn();
        // 添加数据
        AddData.main();
        // 修改数据
        UpDateData.main();
    },

    // 渲染dom
    rendererFn(index, fool){
        // 筛选删除数据
        let selectData = this.deleteData(Data);
        // 根据页面情况进行数据筛选
        selectData = ScreenData.AllSelect(selectData);
        // 渲染数据
        this.rendererData(index, selectData);
        // 根据情况渲染btn
        fool && ScreenBtn.pages(selectData);
        // 重置
        this.deleteRest();
    },

    // 判断是否删除的
    deleteData(Data){
        let selectData = [];
        for(let i = 0; i < Data.length; i++){
            if(!Data[i].delete){
                selectData.push(Data[i]);
            }
        }
        return selectData;
    },

    // 渲染后台数据
    rendererData(num, Data){
        num = Math.ceil(num);
        let pagnum = 0;
        let i = 0;
        if(num >= 0){
            i = num * 10;
            if(((num+1) * 10 > Data.length)){
                pagnum = Data.length - num * 10;
                num = Data.length;
            }else{
                pagnum = 10;
                num = (num+1) * 10;
            }
        }
    
        // 获取后台数据添加到网页
        const frag = document.createDocumentFragment();
    
        for(; i < num; i++){
            {/* <ul class="box-list myclear"></ul> */}
            const ul = document.createElement('ul');
            ul.classList.add('box-list');
            ul.classList.add('myclear');
    
            {/* <li class="list-all list-li"><span>√</span></li> */}
            const liAll = document.createElement('li');
            liAll.classList.add('list-all');
            liAll.classList.add('list-li');
            const spanAll = document.createElement('span');
            spanAll.classList.add('J_select')
            spanAll.setAttribute('data-bool', 'true');
            const spanAllText = document.createTextNode('√');
            spanAll.appendChild(spanAllText);
            liAll.appendChild(spanAll);
            ul.appendChild(liAll);
    
            {/* <li class="list-id list-li">202000001</li> */}
            const liId = document.createElement('li');
            liId.classList.add('list-id');
            liId.classList.add('list-li');
            let spanIdText = document.createTextNode(Data[i]['userId']);
            liId.appendChild(spanIdText);
            ul.appendChild(liId);
    
            {/* <li class="list-name list-li">迪丽热巴</li> */}
            const liName = document.createElement('li');
            liName.classList.add('list-name');
            liName.classList.add('list-li');
            const spanNameText = document.createTextNode(Data[i]['userName']);
            liName.appendChild(spanNameText);
            ul.appendChild(liName);
    
            {/* <li class="list-sex list-li">男</li> */}
            const liSex = document.createElement('li');
            liSex.classList.add('list-sex');
            liSex.classList.add('list-li');
            const spanSexText = document.createTextNode(Data[i]['userSex']);
            liSex.appendChild(spanSexText);
            ul.appendChild(liSex);
    
            {/* <li class="list-age list-li">21</li> */}
            const liAge = document.createElement('li');
            liAge.classList.add('list-age');
            liAge.classList.add('list-li');
            const spanAgeText = document.createTextNode(Data[i]['userAge']);
            liAge.appendChild(spanAgeText);
            ul.appendChild(liAge);
    
            {/* <li class="list-birth list-li">1999/12/09</li> */}
            const liBirth = document.createElement('li');
            liBirth.classList.add('list-birth');
            liBirth.classList.add('list-li');
            const spanBirthText = document.createTextNode(Data[i]['userBirth']);
            liBirth.appendChild(spanBirthText);
            ul.appendChild(liBirth);
    
            {/* <li class="list-phone list-li">13544231231</li> */}
            const lipPhone = document.createElement('li');
            lipPhone.classList.add('list-phone');
            lipPhone.classList.add('list-li');
            const spanPhoneText = document.createTextNode(Data[i]['userPhone']);
            lipPhone.appendChild(spanPhoneText);
            ul.appendChild(lipPhone);
    
            {/* <li class="list-address list-li">湖北省武汉市</li> */}
            const liAddress = document.createElement('li');
            liAddress.classList.add('list-address');
            liAddress.classList.add('list-li');
            const spanAddressText = document.createTextNode(Data[i]['userAddress']);
            liAddress.appendChild(spanAddressText);
            ul.appendChild(liAddress);
    
            {/* <li class="list-descript list-li">这里是默认描述，暂时什么都没有</li> */}
            const liDescript = document.createElement('li');
            liDescript.classList.add('list-descript');
            liDescript.classList.add('list-li');
            const spanDescriptText = document.createTextNode(Data[i]['userDescript']);
            liDescript.appendChild(spanDescriptText);
            ul.appendChild(liDescript);
    
            {/* <li class="list-delete list-li"><span>删除</span></li> */}
            const liDelete = document.createElement('li');
            liDelete.classList.add('list-delete');
            liDelete.classList.add('list-li');
            const spanDelete = document.createElement('span');
            spanDelete.classList.add('J_del');
            const spanDeleteText = document.createTextNode('删除');
            spanDelete.appendChild(spanDeleteText);
            liDelete.appendChild(spanDelete);
            ul.appendChild(liDelete);
    
            frag.appendChild(ul);
        }
    
        // 把数据添加到DOM树上
        const div = document.getElementById('J_Data');
        div.innerHTML = null;
        div.appendChild(frag);
    
        // 给删除绑定点击事件
        DeleteData.main(Data,pagnum);
    },

    // 生日
    birth(num){
        let J_year = document.getElementById('J_year');
        let J_month = document.getElementById('J_month');
        let J_day = document.getElementById('J_day');
        let age = document.getElementsByClassName('model-age')[0].getElementsByTagName('input')[0];
        let frag1 = document.createDocumentFragment();

        // 年
        frag1.appendChild(new Option('--请选择--'));
        for(let i = 2020; i > 1900; i--){
            frag1.appendChild(new Option(i));
        }
        J_year.appendChild(frag1);
        num.length > 0 && (J_year.children[num[0]].selected = true);
        const a = new Date().getFullYear() - J_year["options"][num[0]].value;
        
        num[0] > 0 && (age.value = a);

        if(num[0] == undefined){
            J_monthFn(false);
        }else{
            J_monthFn(true);
            if(num[1] != undefined){
                J_month.children[num[1]].selected = true;
            }
        }

        if(num[1]  == undefined){
            J_dayFn(false);
        }else{
            J_dayFn(true);
            if(num[2]  != undefined){
                J_day.children[num[2]].selected = true;
            }
        }

        // 月
        J_year.onchange = function(){
            if(this.selectedIndex == 0){
                age.value = '';
                J_monthFn(false);
            }else{
                age.value = new Date().getFullYear() - J_year["options"][this.selectedIndex].value;
                J_monthFn(true);
            }
        } 

        // 日
        J_month.onchange = function(){
            if(this.selectedIndex == 0){
                J_dayFn(false);
            }else{
                J_dayFn(true);
            }
        }

        function J_monthFn(bool){
            J_month.innerHTML = '';
            J_day.innerHTML = '';
            J_day.appendChild(new Option('--请选择--'));
            frag1.appendChild(new Option('--请选择--'));


            if(bool){
                for(let i = 1; i < 13; i++){
                    if(i < 10){
                        frag1.appendChild(new Option('0' + i));
                    }else{
                        frag1.appendChild(new Option(i));
                    }
                }
            }

            J_month.appendChild(frag1);
        }

        function J_dayFn(bool){
            J_day.innerHTML = '';
            frag1.appendChild(new Option('--请选择--'));
            if(bool){
                for(let i = 1; i < 32; i++){
                    if(i < 10){
                        frag1.appendChild(new Option('0' + i));
                    }else{
                        frag1.appendChild(new Option(i));
                    }
                }
            }
            J_day.appendChild(frag1);
        }
    },

    // 三级联动：创建籍贯
    cityFun(arr, num){
        let J_province = document.getElementById('J_province');
        let J_town = document.getElementById('J_town');
        let J_disrict = document.getElementById('J_disrict');

        let frag1 = document.createDocumentFragment();
        let frag2 = document.createDocumentFragment();
        let frag3 = document.createDocumentFragment();
        // 省
        J_province.innerHTML = '';
        frag1.appendChild(new Option('--请选择--',-1));
        for(let i = 0; i < arr.length; i++){
            frag1.appendChild(new Option(arr[i]['n'],arr[i]['i']));
        }
        J_province.appendChild(frag1);
        num.length > 0 && (J_province.children[num[0] + 1].selected = true);

        province(num[0], true);
        num.length > 1 && (J_town.children[num[1] + 1].selected = true);

        town(num[0], num[1], true);
        num.length > 2 && (J_disrict.children[num[2] + 1].selected = true);
        
        
        // 市
        J_province.onchange = function(){
            num[0] = this.selectedIndex;
            
            if(!num[0]){
                province(num[0], false);
            }else{
                num[0]--;
                province(num[0], true);
            }
        };

        // 区
        J_town.onchange = function(){
            num[1] = this.selectedIndex;

            if(num[1]){
                num[1]--;
                town(num[0], num[1], true);
            }else{
                town(num[0], num[1], false);
            }
        }


        function province(index1, bool){
            J_town.innerHTML = '';
            J_disrict.innerHTML = '';
            frag2.appendChild(new Option('--请选择--',-1));
            J_disrict.appendChild(new Option('--请选择--',-1));
            if(bool){
                if(index1 >= 0){
                    for(let i = 0; i < arr[index1]['c'].length; i++){
                        frag2.appendChild(new Option(arr[index1]['c'][i]['n'],arr[index1]['c'][i]['i']));
                    }
                }
            }
            J_town.appendChild(frag2);
        }

        function town(index1, index2, bool){
            J_disrict.innerHTML = '';
            frag3.appendChild(new Option('--请选择--',-1));
            if(bool){
                if(index1 >= 0 && index2 >= 0){
                    for(let i = 0; i < arr[index1]['c'][index2]['c'].length; i++){
                        frag3.appendChild(new Option(arr[index1]['c'][index2]['c'][i]['n'],arr[index1]['c'][index2]['c'][i]['i']));
                    }
                }
            }
            J_disrict.appendChild(frag3);
        }

    },

    // 重置批量删除和全选
    deleteRest(){
        document.getElementById('J_delete').style.display = 'none';
        document.getElementById('J_selectAll').style.color = '#fff';
        document.getElementById('J_selectAll').dataset.bool = 'true';
    },
}